<template>
  <div style="width: 100%;height: 100%;display: flex">
    <div class="left_box">
      <div class="code_box">
        <ace-editor style="width: 100%;height: 100%" :html-text-value="htmlStr" :ts-text-value="tsStr"></ace-editor>
      </div>
    </div>
    <div id="load4490_box">
      <div class="popup_box">
        <div class="inner_content_common">
          <div class="single_item">
            <el-button @click="renderStart">渲染</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {initMap} from "@/widgets/modelExample_cesium/common/initMap";
import {onMounted, ref} from "vue";
import heatMap from "../common/heatMap/heatMapRender";
import cityHouse from "../../../assets/data/city_house.json";

import AceEditor from "@/components/aceEditor.vue";


const htmlStr = ref(`
<template>
  <div style="width: 100%;height: 100%;display: flex">
    <div id="load4490_box">
      <div class="popup_box">
        <div class="inner_content_common">
          <div class="single_item">
            <el-button @click="renderStart">渲染</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {initMap} from "@/widgets/modelExample_cesium/common/initMap";
import {onMounted, ref} from "vue";
import heatMap from "../common/heatMap/heatMapRender";
import cityHouse from "../../../assets/data/city_house.json";


const renderStart = (type: string) => {
  heatMap.startRender(cViewer.value,cityHouse.features)
}

const cViewer = ref();
onMounted(() => {
  cViewer.value = initMap("load4490_box")
})
<\/script>

<style lang="scss" scoped>
#load4490_box {
  width: 60%;
  height: 100%;
}

.popup_box {
  position: fixed;
  left: calc(40% + 40px);
  min-width: 100px;
  width: auto;
  top: 80px;
  height: 60px;
  z-index: 10;
}

.inner_content_common {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  flex-direction: column;

  .single_item {
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    align-items: center;
  }

  .single_item_title {
    margin: 10px;
    color: #ffffff;
  }
}
</style>

`);

const tsStr = ref(`
/**
 * 依赖于两个插件一个heatmap.js  一个cesiumheatmap
 */
import CesiumHeatmap  from './CesiumHeatmap'
import gisTools from "../GisTools";
export default new  class heatMap{
    constructor(){

    }
    /**
     * 开始渲染
     * @param {*} coords  计算范围
     * @param {*} geojson  渲染热力
     */
    startRender(viewer:any,features:any){
        gisTools.cameraFlyToPoint(viewer,[ 119.56751284, 31.74209036 ]);
        const points:any = []
        let west = 1000; let east = -1000; let south = 1000; let north = -1000;
        let valueMin = 0
        let valueMax = 0
        features.forEach(function(feature:any) {
            let lon =null;//经度
            let lat = null;//维度
            if(feature.geometry.type==="point"){
                lon =feature.geometry.coordinates[1];
                lat = feature.geometry.coordinates[1];
            }else if(feature.geometry.type==="MultiPolygon"){
                let center=gisTools.computeCenter(feature);
                let jwd84= gisTools.Cartesian3ToLngLat(center);
                let jwd2000=gisTools.wgs84ToCgcs2000([[jwd84.latitude,jwd84.longitude]]);
                lon =jwd2000[0][1];
                lat =jwd2000[0][0];
            }
            west = Math.min(west, lon)
            east = Math.max(east, lon)
            south = Math.min(south, lat)
            north = Math.max(north, lat)
            let hight=feature.properties.gd;
            if(hight){
                hight=Number(hight)
            }else{
                hight=0
            }
            valueMax=Math.max(valueMax, hight)
            points.push({
                x: lon,
                y: lat,
                value: hight
            })
        })
        const bounds = {
            west,
            east,
            south,
            north
        }
        // init heatmap
        const heatMap = CesiumHeatmap.create(
            viewer,
            bounds,
            {
                minOpacity: 0.15,
                maxOpacity: 0.8,
                radius: 50,
                blur: 0.9,
                gradient: {
                    '.2': '#546AA4',
                    '.4': '#0DB212',
                    '.6': '#D6CE3B',
                    '.8': '#CC9C1B',
                    '1': '#DC0F2A'
                }
            }
        )
        heatMap.setWGS84Data(valueMin, 10, points)
    }
}

`);

const renderStart = (type: string) => {
  heatMap.startRender(cViewer.value,cityHouse.features)
}

const cViewer = ref();
onMounted(() => {
  cViewer.value = initMap("load4490_box")
})
</script>

<style lang="scss" scoped>
.left_box {
  width: 40%;
  height: 100%;
  display: flex;
  flex-direction: row-reverse;

  .code_box {
    margin: 10px;
    width: calc(100% - 220px);
    height: calc(100% - 20px);
    //border:1px solid #00ff00;
    background-color: #ffffff;
    color: #000;
    overflow-x: hidden;
    overflow-y: auto;
  }
}

#load4490_box {
  width: 60%;
  height: 100%;
}

.popup_box {
  position: fixed;
  left: calc(40% + 40px);
  min-width: 100px;
  width: auto;
  top: 80px;
  height: 60px;
  z-index: 10;
}

.inner_content_common {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  flex-direction: column;

  .single_item {
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    align-items: center;
  }

  .single_item_title {
    margin: 10px;
    color: #ffffff;
  }
}
</style>
